<template>
  <div class="mainpage">
    <b-navbar toggleable="lg" type="dark" variant="primary">
        <b-navbar-brand href="/">我的网站</b-navbar-brand>
        <b-navbar-nav>
          <b-nav-item to="/notebook">备忘录</b-nav-item>
        </b-navbar-nav>
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
            <b-nav-form>
                <b-form-input size="sm" class="mr-sm-2" placeholder="Search" v-model="keywords"></b-form-input>
                <b-button size="sm" class="my-2 my-sm-0" type="submit" v-bind:variant="variant" @click="filterTitle">Search</b-button>
            </b-nav-form>
        </b-navbar-nav>
    </b-navbar> 
    <transition>
        <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Mainpage',
  data() {
    return {
      keywords: '',
      variant: ''
    }
  },
  watch: {
    keywords: function(newWords) {
      if (newWords.trim().length > 0) {
        this.variant = 'success';
      }else {
        this.variant = '';
      }
    }
  },
  methods: {
    filterTitle() {
      localStorage.setItem("keywords", this.keywords);
    }
  }
}
</script>

<style scoped>
</style>
